@import "@automattic/color-studio/dist/color-variables";

.toggle-input {
	.toggle-input__control {
		padding: 16px 21px;
		margin-bottom: 0;
		.components-form-toggle__input,
		.components-toggle-control__label {
			cursor: pointer;
		}

		&.is-loading {
			cursor: default;
			opacity: 0.5;
			pointer-events: none;
		}

		.components-toggle-control__label {
			font-size: $font-body-small;
			line-height: $font-title-small;
		}
	}

	&:first-child .toggle-input__control {
		padding-top: 21px;
	}

	&:last-child .toggle-input__control {
		padding-bottom: 21px;
	}

	.toggle-input__hint {
		width: 212px;
		padding: 0 21px;
		text-align: left;
		line-height: $font-body;
		color: $studio-gray-50;
	}
}
